<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>选择器权重</title>
        <style>
            .d{/* 权值10 （类选择器）*/
                background-color: #ffff95;
            }
            div{/* 权值1（元素选择器） */
                background-color: aquamarine;
            }
            #d1{/* 权值100（id选择器） */
                background-color: aqua;
            }
            *{/* 权值0（通用选择器） */
                background-color: blue;
            }
            #d1:hover{/* 伪类 算和 权值10 */
                background-color: chartreuse;
            }
            /* 加权写法：元素选择器+任意选择器 */
            div#d1{/* 权值101 */
                background-color: blueviolet;
            }
            
            
        </style>
    </head>
    <body>
        <!-- 选择器存在权值，权值高的先执行，所学的所有选择器抓同一个元素 
        （不建议）内联样式表，权值：1000
        id选择器 权值 ：100
        类选择器，伪类选择器 权值：10
        元素选择器，伪元素选择器 权值：1
        通用选择器 权值：0
        算和：派生、子代、兄弟，权值高的先执行
        （不建议）破坏优先级     效果优先执行--属性值  ！ important
        -->
        <div id="d1" class="d">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius molestias numquam iure unde tempore ratione temporibus obcaecati accusantium itaque, quos aliquid vel, praesentium illo, harum sint debitis natus. Iusto, mollitia?</div>
    </body>
</html>